<template>
    <!-- 张权 2023年4月6日 13点44分 -->
    <!-- 个人主页 -->
    <div id="Personal">
        <div id="div1">
            <el-container style="width:100%;height: 100%;">
                <el-aside width="200px" id="elaside1">
                    <el-menu :unique-opened="true" router>
                        <el-submenu index='3'>
                            <template slot="title">
                                <span>个人中心</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="/message">个人信息</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-menu-item index="/address">
                            <span slot="title">我的地址</span>
                        </el-menu-item>
                        <el-submenu index='1'>
                            <template slot="title">
                                <span>我的收藏</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="/commodityCollectionOne">商品收藏</el-menu-item>
                                <el-menu-item index="/DIYShopsCollection">DIY收藏</el-menu-item>
                                <el-menu-item index="/">动态收藏</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index='2'>
                            <template slot="title">
                                <span>订单中心</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="/MyOrder">我的订单</el-menu-item>
                                <el-menu-item index="/AfterSalesOrder">订单售后</el-menu-item>
                                <el-menu-item index="/AfterSales">售后管理</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main style="height: 100%;">
                    <router-view></router-view>
                </el-main>
            </el-container>
        </div>
        
    </div>
</template>

<script>
export default {

}
</script>

<style scoped>
    /* /deep/ .el-submenu__title:hover {
        background-color: #ecf5ff;
    } */
    /* /deep/ .el-menu-item.is-active {
        color: #409EFF;
    } */
    /deep/ .el-menu-item{
        text-align: center;
    }
    /deep/ .el-submenu{
        text-align: center;
    }
    #div1{
        width: 80%;
        height: 1500px;
        margin: auto;
    }
    #elaside1{
        height: 100%;
        background: white;
    }
</style>